﻿@model geographymaster.Models.GameViewModel

@{
    ViewBag.Title = "Game";
    Layout = "~/Views/_BasicLayout.cshtml";
}

<div class="continent">
    <div class="score-board">
        <span class="score-text">Score:</span>
        <label class="score">@Model.Score</label>
        <img src="~/Content/photos/help_ballon.png" class="help-balloon" />
    </div>

    <div class="game-question">
        @Model.QuestionDetails.Question1
        <div class="game-question-options">
            [@Html.ActionLink("Back to categories", "Category", new { idCategory = Model.QuestionDetails.IdCategory })]
            [@Html.ActionLink("Next question", "Game", new
        {
            idCategory = Model.QuestionDetails.IdCategory,
            idSubcategory = Model.QuestionDetails.IdSubcategory
        })]
            <img src="~/Content/photos/info-icon.gif" class="info-box" />
        </div>
    </div>

    <div class="game-answers">
        @Html.HiddenFor(model => model.QuestionDetails.IdQuestion, new { @class = "idQuestion" })

        @foreach (var item in @Model.QuestionDetails.Answers)
        {
            <div class="ball" id="@item.IdAnswer">
                @Html.TextBoxFor(model => item.AnswerDescription, new { @readonly = "readonly", @class = "ball-text", @id = item.IdAnswer })
            </div>
        }
    </div>
    <audio id="audioElementCorrect" src="~/Content/music/correct_answer.mp3"></audio>
    <audio id="audioElementIncorrect" src="~/Content/music/incorrect_answer.mp3"></audio>

    <div class="hint-preview">
        <div class="hint-preview-items">
        </div>
    </div>
    <div class="info-box-preview">
        <div class="info-box-preview-items">
        </div>
    </div>
    <div class="new-badge">
         <div class="new-badge-items">
        </div>
    </div>
    <div class="master-badge">
        <div class="master-badge-score-table">[@Html.ActionLink("Write in your score", "EnterScore")]</div>
        <div class="master-badge-items">
        </div>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="~/Content/scripts/moveAnswerBall.js"></script>
<script src="~/Content/scripts/question.js"></script>


